<template>
	<view id="allmap" class="allmap" />
</template>
<script module="AMapInstance" lang="renderjs">
	// 使用 renderjs,只支持 app-vue 和 web 
	export default {
		name: 'BMapGL',
		data() {
			return {
				bdMapUrl: 'https://api.map.baidu.com/api?v=1.0&type=webgl&callback=initBMap&ak=',
				bdMapKey: 'Af6FfpOOZrHT1Ff2enuUKMZgjz4NfQ3W',
				map: null
			}
		},
		created() {
			this.initMap()
		},
		beforeDestroy() {
			if (this.map) {
				this.map.destroy()
			}
		},
		methods: {
			bMapGLLoader() {
				return new Promise((resolve, reject) => {
					if (window.BMapGL) {
						resolve(window.BMapGL)
					} else {
						const script = document.createElement('script')
						script.type = 'text/javascript'
						script.src = this.bdMapUrl + this.bdMapKey
						script.async = true
						script.onerror = reject
						document.head.appendChild(script)
					}
					window.initBMap = function() {
						resolve(window.BMapGL)
					}
				})
			},
			// 初始化地图
			initMap() {
				this.$nextTick(() => {
					this.bMapGLLoader().then(BMapGL => {
						this.map = new BMapGL.Map('allmap')
						this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
						// 添加中心点和缩放等级，如果不添加，初始化出来页面为白屏
						const point = new BMapGL.Point(108.970588, 34.224352); // 创建点坐标
						this.map.centerAndZoom(point, 17)
					})
				})
			}
		}
	}
</script>

<style>
	.allmap {
		width: 100%;
		height: 100%;
		position: absolute;
	}
</style>
